import React, { useState, useEffect } from 'react';
import './index.css'
const Index = () => {
    const [input, setInput] = useState('')
    const [incomplete, setIncomplete] = useState([])
    /* 深拷贝 */
    let _incomplete = JSON.parse(JSON.stringify(incomplete))
    const [completed, setCompleted] = useState([])
    let _completed = JSON.parse(JSON.stringify(completed))
    /* 双向数据流 */
    const handleInputChange = (e) => {
        setInput(e.target.value)
    }
    /* input框的回车事件 */
    const handleInputEnter = (e) => {
        if (e.keyCode === 13) {
            var value = input
            if ((!_incomplete.includes(value)) && (!_completed.includes(value))) {
                _incomplete.push(value)
                setIncomplete(_incomplete)
                localStorage.setItem('incomplete', JSON.stringify(_incomplete))
                setInput('')
            }else{
                alert('这件事情已经在今日行程中了💖')
                setInput('')
            }
        }
    }
    /* 多选框点击事件 */
    const handleChange = (index, val) => {
        if (val === 'incomplete') {
            _completed.push(..._incomplete.splice(index, 1))

        } else {
            _incomplete.push(..._completed.splice(index, 1))
        }
        setIncomplete(_incomplete)
        localStorage.setItem('incomplete', JSON.stringify(_incomplete))
        setCompleted(_completed)
        localStorage.setItem('completed', JSON.stringify(_completed))
    }
    /* 删除事件 */
    const handleDetail = (index, val) => {
        if (val === 'incomplete') {
            _incomplete.splice(index, 1)
            setIncomplete(_incomplete)
            localStorage.setItem('incomplete', JSON.stringify(_incomplete))
        } else {
            _completed.splice(index, 1)
            setCompleted(_completed)
            localStorage.setItem('completed', JSON.stringify(_completed))
        }
    }
    useEffect(() => {
        var Incomplete = localStorage.getItem('incomplete')
        if (Incomplete) {
            setIncomplete(JSON.parse(Incomplete))
        }
        var Completed = localStorage.getItem('completed')
        if (Completed) {
            setCompleted(JSON.parse(Completed))
        }
    }, [])
    return (
        <div className='page'>
            <h2>ToDoList</h2>
            <input type="text" value={input} onChange={handleInputChange}
                onKeyUp={handleInputEnter} className='input'
                placeholder='输入今日目标吧😊' />
            <div className={incomplete.length ? 'showIt' : 'showNone'}>
                <h3>未完成 {incomplete.length}</h3>
                {incomplete.map((item, index) => {
                    return (<div key={item} className="list">
                        <input type="checkbox" onChange={() => handleChange(index, 'incomplete')} />
                        <span>{index + 1}</span>
                        <span className='item'>{item}</span>
                        <button onClick={() => handleDetail(index, 'incomplete')}>删除</button>
                    </div>)
                })}
            </div>
            <div className={completed.length ? 'showIt' : 'showNone'}>
                <h3>已完成 {completed.length}</h3>
                {completed.map((item, index) => {
                    return (<div key={item} className="list">
                        <input type="checkbox" checked onChange={() => handleChange(index)} />
                        <span>{index + 1}</span>
                        <span className='item'>{item}</span>
                        <button onClick={() => handleDetail(index)}>删除</button>
                    </div>)
                })}
            </div>
        </div>
    );
}
export default Index;